<template>
  <div class="">
    <div class="box0011">
      <h2 class="">jacoco代码覆盖率报告</h2>
      <h3 style="margin:auto">项目名称： {{list.name}}</h3>
      <h5 style="margin:auto">报告生成时间： {{list.createTime}}</h5>
      <h4 >{{null}}</h4>
      <div class="box0012" v-if="list.coverStatus===11">
        增量代码覆盖率
      </div>
      <div class="box0013" v-if="list.coverStatus===22">
        全量代码覆盖率
      </div>
    </div>
    <div style="margin-left: 400px">
      <div class="flex">行级代码覆盖率：
        <div  >
          <el-progress id="progress" :text-inside="true" :stroke-width="24"
                       :percentage="list.lineCoverage" :status="data.lineCoverages.status"
                       style="stroke-width:5">
          </el-progress>
        </div>
      </div>
      <div class="flex" style="margin-top: 10px">分支代码覆盖率：
      <div>
        <el-progress id="progress" :text-inside="true" :stroke-width="24"
                   :percentage="list.branchCoverage" :status="data.branchCoverages.status"
                     style="stroke-width:5">
      </el-progress>
      </div></div>
      <el-button class="box004" type="info" round icon="el-icon-document"
                 @click="goToReport">查看详细报告
      </el-button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      data: {
        lineCoverages: {
          status: null,
        },
        branchCoverages: {
          status: null,
        },
      },
      list: [],
    };
  },
  created() {
    this.getreport();
  },
  methods: {
    async getreport() {
      this.$getRequest.get('/cov/getEnvCoverResultList?pageIndex=1&pageSize=1')
        .then((resp) => {
          // eslint-disable-next-line no-console
          console.log(resp.data.data.list);
          // eslint-disable-next-line prefer-destructuring
          this.list = resp.data.data.list[0];
          if (resp.data.data.list[0].lineCoverage === 100) {
            this.data.lineCoverages.status = 'success';
          }
          if (resp.data.data.list[0].branchCoverage === 100) {
            this.data.branchCoverages.status = 'success';
          }
        });
    },
    goToReport() {
      const { reportUrl } = this.list;
      window.open(reportUrl, '_blank');
    },
  },

};
</script>

<style>
#progress {
  width: 300px;
  //margin-left: 540px;
  //margin-top: -20px;
}

.box0011 {
  text-align: center;
  margin-top: 0;
}

.box0012 {
  margin-left: 800px;
  margin-top: -10px;
}

.box0013 {
  margin-left: 800px;
  margin-top: -10px;
}

.box004 {
  margin-left: 800px;
  margin-top: 40px;
}
.flex{
  display: flex;
  align-items: center;
}
</style>
